/* eslint-disable react-refresh/only-export-components */
import MyNavBar from '../../components/navbar'
import NavDate from '../../components/navdate'
import { getTrainDetailApi } from '../../api/train'
import { useLoaderData, useSearchParams } from 'react-router-dom'
import TicketCard from './components/TicketCard'
import TicketCollapse from './components/TicketCollapse'
import styles from './css/detail.module.css'

function TrainDetail() {
  const { info } = useLoaderData()
  const [sp] = useSearchParams()

  return (
    <div className={styles.box}>
      <MyNavBar title={info.trainNo} />
      <NavDate date={sp.get('date')} />

      <div style={{ margin: '10px' }}>
        {/* 车票的卡片 */}
        <TicketCard {...info} />

        {/* 折叠展开区域 */}
        <TicketCollapse {...info} />
      </div>
    </div>
  )
}

export default TrainDetail

export const loader = async ({ params, request }) => {
  // 准备接口的参数
  // 1. 获取路径参数
  const id = params.id
  // 2. 解析查询参数
  const url = new URL(request.url)
  const obj = Object.fromEntries(url.searchParams)

  const { data: res } = await getTrainDetailApi(id, obj)
  return { info: res }
}
